<template>
	<view class="repWrap">
		<view class="modTit">问题归类<text class="tip" v-if="currType == 'add'">(可多选,最多选4项)</text></view>
		<view class="moCon clearfix">
			<template v-if="currType == 'add'">
				<view class="typeItem"
					:class="[item.selFlag ? 'active' : '']"
					v-for="(item,index) in tagList"
					:key="index"
					@tap="selectTag(item)"
				>{{item.tagName}}</view>
			</template>
			<template v-else>
				<view class="typeItem view"
					v-for="(item,index) in queList"
					:key="index"
				>{{item}}</view>
			</template>
		</view>
		<view class="modTit">咨询主题</view>
		<view class="modCon hasMargBot" :class="currType == 'add' ? '' : 'view'">
			<textarea v-if="currType == 'add'" v-model="zxTit" class="txtArea" placeholder="请输入咨询主题(100字内)" maxlength="100"></textarea>
			<rich-text v-else :nodes="zxTit"></rich-text>
		</view>
		<view class="modTit">辅导要点</view>
		<view class="modCon hasMargBot" :class="currType == 'add' ? '' : 'view'">
			<textarea v-if="currType == 'add'" v-model="fdyd" class="txtArea" placeholder="请输入辅导要点(200字内)" maxlength="200"></textarea>
			<rich-text v-else :nodes="fdyd"></rich-text>
		</view>
		<view class="modTit">总结反思</view>
		<view class="modCon hasMargBot" :class="currType == 'add' ? '' : 'view'">
			<textarea v-if="currType == 'add'" v-model="zjfs" class="txtArea" placeholder="请输入总结反思(200字内)" maxlength="200"></textarea>
			<rich-text v-else :nodes="zjfs"></rich-text>
		</view>
		<template v-if="currType == 'add'">
			<view class="itemRadCon" @tap="showViewTagSta">
				<view class="radView" :class="[viewTag == 1 ? 'active' : '']"><view class="iconfont icon-xuanze"></view></view>
				<view class="radTit">测评报告是否同步给咨客{{zxName}}</view>
			</view>
			<button class="comBtn" :disabled="isDisableFlag" @tap="goSubmit">提交</button>
		</template>
	</view>
</template>

<script>
	import { addZxRep,getGroupTagList } from '@/api/mine/index.js'
	export default {
		data(){
			return{
				//填写咨询报告
				zxTit:'',
				fdyd:'',
				zjfs:'',
				viewTag:1,//1允许 2不允许
				viewTagFlag:true,
				zxName:'',
				isDisableFlag:false,
				orderId:'',
				tagList:[],
				sdNameArr:[],
				sdIdArr:[],
				currType:'',//add view
				queList:[]
			}
		},
		onLoad(option){
			this.zxName = option.zxName;
			this.currType = option.currType;
			this.orderId = option.orderId;
			if(this.currType == 'view'){
				let zxReport = uni.getStorageSync('zxReport');
				this.queList = zxReport.zxwtType.split(',');
				this.zxTit = zxReport.zxTitle;
				this.fdyd = zxReport.fdyd;
				this.zjfs = zxReport.zjfs;
			}
			this.getSdTagList();
		},
		onUnload(){
			uni.removeStorageSync('zxReport');
		},
		methods:{
			getSdTagList(){
				var field = { showStatus:1,tagType:2 }
				getGroupTagList(field).then(res=>{
					this.tagList = res.data.datas;
					for(let i in this.tagList){
						this.$set(this.tagList[i],'selFlag',false);
					}
				}).catch(err=>{
					console.log(err)
				});
			},
			selectTag(item){
				if(item.selFlag){
					this.$set(item,'selFlag',false);
					for(var i=0;i<this.sdIdArr.length;i++){
						if(item.id == this.sdIdArr[i]){
							this.sdIdArr.splice(i,1);
							this.sdNameArr.splice(i,1);
						}
					}
				}else if(item.selFlag == false){
					this.$set(item,'selFlag',true)
					this.sdIdArr.push(item.id);
					this.sdNameArr.push(item.tagName);
				}
			},
			showViewTagSta(){
				this.viewTagFlag = !this.viewTagFlag;
				this.viewTag = this.viewTagFlag ? 1 : 2;
			},
			goSubmit(){
				if(this.sdIdArr.length == 0){
					this.util.showToast('请选择问题归类');
				}else if(this.sdIdArr.length > 4){
					this.util.showToast('情况概述标签最多可选4项');
				}else if(this.zxTit == ''){
					this.util.showToast('请填写咨询主题');
				}else if(this.fdyd == ''){
					this.util.showToast('请填写辅导要点');
				}else if(this.zjfs == ''){
					this.util.showToast('请填写总结反思');
				}else{
					let zxwtTypeStr = this.sdNameArr.join(','),zxwtTypeIdStr = this.sdIdArr.join(',');
					let field = { id:this.orderId,
						zxTitle:this.util.replaceToBr(this.zxTit),
						zxwtTypeId:zxwtTypeIdStr,
						zxwtType:zxwtTypeStr,
						fdyd:this.util.replaceToBr(this.fdyd),
						zjfs:this.util.replaceToBr(this.zjfs),
						viewTag:this.viewTag }
					this.isDisableFlag = true;
					uni.showLoading({ title: '提交中...', mask: true }); 
					addZxRep(field).then(res=>{
						uni.showToast({ title: '提交成功' });
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2];
						prevPage.$vm.isRefreshFlag = true;
						setTimeout(()=>{
							uni.navigateBack({delta:1})
						},1500)
					}).catch(err=>{
						this.isDisableFlag = false;
						console.log(err)
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/scss/addZxRep.scss';
	// .repWrap{
	// 	padding: 30rpx;
	// }
	// .modTit{
	// 	height: 80rpx;
	// 	line-height: 80rpx;
	// 	color: $pss-text-color0;
	// 	font-size: 30rpx;
	// 	margin-bottom: 10rpx;
	// 	.tip{
	// 		font-size: 24rpx;
	// 		color: $pss-color-blueDeep;
	// 		margin-left: 10rpx;
	// 	}
	// }
	// .hasMargBot{
	// 	margin-bottom: 15rpx;
	// 	&.view{
	// 		font-size: 28rpx;
	// 		border-radius: 8rpx;
	// 		background: #FAF9FE;
	// 		color: $pss-text-color6;
	// 		padding: 15rpx;
	// 		line-height: 46rpx;
	// 	}
	// }
	// .typeItem{
	// 	width: 32%;
	// 	height: 60rpx;
	// 	line-height: 60rpx;
	// 	background:#F4F5F7 ;
	// 	border-radius: 6rpx;
	// 	text-align: center;
	// 	font-size: 26rpx;
	// 	color: $pss-text-color8;
	// 	float: left;
	// 	margin-bottom:20rpx;
	// 	&:nth-of-type(3n){
	// 		float: right;
	// 	}
	// 	&:nth-of-type(3n-1){
	// 		margin-left: 2.2%;
	// 	}
	// 	&.active,
	// 	&.view{
	// 		background: $pss-color-blueDeep;
	// 		color: #fff;
	// 	}
	// }
	// .txtArea{
	// 	border: 1rpx solid #ccc;
	// 	border-radius: 8rpx; 
	// 	width: 90%;
	// 	padding: 3% 5%;
	// 	height: 260rpx;
	// 	font-size: 28rpx;
	// 	color: $pss-text-color0;
	// }
	// .itemRadCon{
	// 	display: flex;
	// 	align-items: center;
	// 	margin:50rpx 0;
	// 	font-size: 28rpx;
	// 	color: #4B88F3;
	// 	.radView{
	// 		width:28rpx;
	// 		height:28rpx;
	// 		line-height:28rpx;
	// 		border: 1rpx solid #ccc;
	// 		border-radius: 6rpx;
	// 		color: #fff;
	// 		text-align: center;
	// 		margin-right: 10rpx;
	// 		.icon-xuanze{
	// 			font-size: $font-size24;
	// 		}
	// 		&.active{
	// 			border: 1rpx solid $pss-color-blueDeep;
	// 			background: $pss-color-blueDeep;
	// 		}
	// 	}
	// }
	// .comBtn{
	// 	height: 90rpx;
	// 	font-size: 30rpx;
	// }
</style>